import { ModalForm, ProForm, ProFormDateTimePicker, ProFormInstance, ProFormMoney, ProFormRadio, ProFormText } from '@ant-design/pro-components';
import { Select, Tooltip, message } from 'antd';
import { useEffect, useRef } from 'react';
import { waitTime } from '@/utils/request';
import { addInstrument, updateInstrument } from '@/services/api/instrument';
import { QuestionCircleOutlined } from '@ant-design/icons';

interface InputDialogProps {
  detailData?: API.InstrumentDTO;
  visible: boolean;
  
  onClose: (result: boolean) => void;
}

export default function InputDialog(props: InputDialogProps) {
  const form = useRef<ProFormInstance>(null);

  useEffect(() => {
    waitTime().then(() => {
      if (props.detailData) {
        form?.current?.setFieldsValue(props.detailData);
      } else {
        form?.current?.resetFields();
      }
    });
  }, [props.detailData, props.visible]);

  const onFinish = async (values: any) => {
    const { id, instrumentName, totalNumber, availableNumber, roomNumber, price, receivingAt, phoneNumber, borrowedBy, returned } = values;
    const data: API.InstrumentDTO = {
      id: props.detailData?.id,
      instrumentName,
      totalNumber,
      availableNumber,
      roomNumber,
      price,
      receivingAt,
      phoneNumber,
      borrowedBy,
      returned
    };

    try{
    if (props.detailData) {
      await updateInstrument(data,{ throwError :true });
    } else {
      await addInstrument(data,{ throwError: true });
    }
  } catch (ex) {
    return true;
  }
    props.onClose(true);
    message.success('保存成功');
    return true;
  };

  return (
    <ModalForm
      width={600}
      onFinish={onFinish}
      formRef={form}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.onClose(false),
      }}
      title={props.detailData ? '修改实验仪器' : '新建实验仪器'}
      open={props.visible}
    >
      <ProFormText
        name="instrumentName"
        label={
          <span>
            仪器名称&nbsp;
            <Tooltip title="请不要输入具有相同名称的仪器">
              <QuestionCircleOutlined />
            </Tooltip>
          </span>
        } 
        placeholder="如：水银温度计"
        rules={[
          {
            required: true,
            message: '请输入仪器名称！',
          },
        ]}
      />
      
      <ProForm.Group>

      <ProFormText
          name="totalNumber"
          label={
            <span>
              仪器总量&nbsp;
              <Tooltip title="请输入大于0的整数">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          placeholder="如：1000"
          rules={[
            {
              required: true,
              message: '请输入仪器总量！',
            },
          ]}
          
        />

        <ProFormText
          name="availableNumber"
          label={
            <span>
              损坏仪器数量&nbsp;
              <Tooltip title="请输入大于0小于仪器总量的整数">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          placeholder="如：10"
          rules={[
            {
              required: true,
              message: '请输入损坏的仪器数量！',
            },
          ]}
        />
        
        <ProFormText
          name="roomNumber"
          label="房间号"
          placeholder="如：102"
          rules={[
            {
              required: true,
              message: '请输入房间号！',
            },
          ]}
        />

        <ProFormText
          name="price"
          label={
            <span>
              价格&nbsp;
              <Tooltip title="请直接输入整数价格">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          placeholder="如：500"
          fieldProps={{
            addonBefore:<span>$</span>,
            type:"number",
          }}
          rules={[
            {
              required: true,
              message: '请输入设备价格！',
            },
          ]}
        />

        <ProFormText
          name="borrowedBy"
          label="领用人"
          placeholder="如：张三"
          rules={[
            {
              required: true,
              message: '请输入质检员！',
            },
          ]}
        />

        <ProFormDateTimePicker
          name="receivingAt"
          label={
            <span>
              领用时间&nbsp;
              <Tooltip title="请点击右侧按钮选择领用时间">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          placeholder="点击右侧按钮选择领用时间"
          rules={[
            {
              required: true,
              message: '领用时间', 
            }
          ]}
        />

        <ProFormText
          name="phoneNumber"
          label={
            <span>
              联系方式&nbsp;
              <Tooltip title="请输入质检员的电话号码">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          placeholder="如：12345678910"
          rules={[
            {
              required: true,
              message: '请输入质检员的联系方式！',
            },
          ]}
        />
      </ProForm.Group>

      <ProFormRadio.Group
        name="returned"
        label={
          <span>
            是否报修&nbsp;
            <Tooltip title="请直接点击'YES'或'NO'前方的按钮">
              <QuestionCircleOutlined />
            </Tooltip>
          </span>
        }
        options={[
      {
        label: 'YES',
        value: 'YES',
      },
      {
        label: 'NO',
        value: 'NO',
      },
    ]}
      rules={[
      {
        required: true,
        message: '请选择 YES 或 NO！',
      },
    ]}
/>
    </ModalForm>
  );
}
